<!--  -->
<template>
    <div class="chip-load">
        <div class="modal-icon-wrapper" >
            <div class="modal-circle-o"></div>
            <div class="modal-circle-i"></div>
            <i class="platformicon icon_jinggao modal-icon"></i> 
        </div>
        <div class='chip-load-wrapper'>
            <p class="chip-label">{{$t('chip.authorization')}}</p>
            <div class="chip-textarea" ref="textarea-value" v-html='params.content'></div>
        </div>
        <div class="modal-btn" @click="validBtn" >{{$t('cmlpanel.confirm')}}</div>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import EventBus from '@/assets/js/app/cmlpanel/util/bus.js'
import * as anov from 'anov-core'
export default {
    name: 'chip-load',
    components: {},
    props: ['data'],
    data() {
        return {
            params: {
                type: '',
                content: ''
            }
        };
    },
     watch: {
        data: {
            handler: function(){
                this.params = this.data;
            },
            immediate: false
        }
    },
    methods: {
        loadInfo(){
            
             this.$refs['textarea-value'].style.opacity=1
             
            let  mySplitText = new SplitText(this.$refs['textarea-value'], {type:"chars"});
             var tl = new TimelineLite();
             tl.add("hear", "+=0");
            tl.staggerFrom(mySplitText.chars, 0.5, {opacity:0, scale:0.8, ease:Power4.easeOut}, 0.02, "hear");
            tl.staggerTo(mySplitText.chars, 0.5, {color:"#509EA4", ease:Power4.easeOut}, 0.02, "hear+=0.1");
            //TweenMax.staggerFrom(mySplitText.chars, 1, {scale:4, autoAlpha:0,  rotationX:-180,  transformOrigin:"100% 50%", ease:Back.easeOut}, 0.01);
        },
        init(){
            this.$refs['textarea-value'].style.opacity=0
            let _this = this
            this.tl = new TimelineMax({
                autoRemoveChildren: true,
                onStart: function(){
                }
            })
            let tw1 = TweenMax.to('.chip-load', 0.3, {opacity: 1})
            let tw4 = TweenMax.to('.chip-load .modal-icon-wrapper', 0.3, { scale: 1, opacity: 1, ease: Power0.easeInOut})
            let tw5 = TweenMax.to('.chip-load .modal-icon', .2, {opacity: 1, scale: 1})
            let tw8 = TweenMax.to('.chip-load .chip-load-wrapper', 0.3, {opacity: 1})
            let tw9 = TweenMax.to('.chip-load .modal-btn', 0.3, {opacity: 1})
            this.tl.addLabel('start')
            this.tl
                .add(this.loadInfo,'start+=0')
                .add(tw1, 'start+=0')
                .add(tw4, 'start+=0.1')
                .add(tw5, 'start+=0.2')
                .add(tw8, 'start+=.4')
                .add(tw9, 'start+=.4')
                
        },
        reset(){
            this.tl.reverse();
            TweenMax.set('.chip-load', {opacity: 0})
            TweenMax.set('.chip-load .modal-icon-wrapper', { scale: 0, opacity: 0})
            TweenMax.set('.chip-load .modal-icon', {opacity: 0, scale: 0})
            TweenMax.set('.chip-load .modal-text', {opacity: 0 })
            TweenMax.set('.chip-load .modal-btn', {opacity: 0})
        },
        destroy(){
            this.reset()
        },
        inputChange(e){
            this.textValue = e.target.value
        },
        validBtn(){
            TweenMax.to('.valid-error', .3, {opacity: 0, height: 0})
            TweenMax.to('.chip-load .modal-btn', 0.3, {opacity: 1})
            EventBus.$emit('closeModal', {noticeType: 'modal', componentsName: 'chipLoad'})
        }
    },
    created() {

    },
    mounted() {
         
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.chip-label{
    font-size: 30px;
}
.chip-load {
    opacity: 0;
}
.chip-load-wrapper {
    margin-top: 20px;
    text-align: center;
}
.chip-textarea {
    width: 100%;
    padding: 5px;
    min-height: 100px;
    margin-top: 20px;
    line-height:30px;
    background: rgba(0,0,0, .8);
    font-size: 20px;
    height: 300px;
    overflow-y: scroll;
    opacity: 0;
    color: rgb(38, 223, 241);
    padding: 30px 50px;
    perspective:100;
}
.chip-error {
    height: 0;
    opacity: 0;
}
.get-valid {

}
</style>